/* pages/home/home.wxss */
@import "./home.skeleton.scss";
.home-page {
  .banner {
    width: 100%;
    height: 350rpx;
    display: flex;
    justify-content: center;
    padding-bottom: 20rpx;
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      width: 120%;
      height: 70%;
      position: absolute;
      left: -10%;
      top: 0;
      z-index: -1;
      border-radius: 0 0 50% 50%;
      background-color: #f3514f;
    }

    Carousel {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 400rpx;
      margin-top: 10rpx;
    }

  }

  .grid {
    width: 100%;
  }

  .activity {
    width: 100%;
    height: 250rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;

    image {
      width: 95%;
      height: 80%;
    }
  }

  .propa {
    width: 100%;
    height: 450rpx;
    margin-top: 20rpx;

    .title {
      width: 100%;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      background-color: #ffffff;

      text {
        font-size: 35rpx;
        color: #f3514f;
      }
    }
  }

  .like {
    margin: 100rpx 0;
    height: 450rpx;

    .title {
      width: 100%;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      background-color: #ffffff;

      text {
        font-size: 35rpx;
        color: #f3514f;
      }
    }
  }

  .hot {
    margin-top: 20rpx;
    height: 450rpx;

    .title {
      width: 100%;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      background-color: #ffffff;

      text {
        font-size: 35rpx;
        color: #f3514f;
      }
    }
  }

  .like-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 100rpx;
    background-color: #ffffff;

    .title {
      width: 100%;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      background-color: #ffffff;

      text {
        font-size: 35rpx;
        color: #f3514f;
      }
    }
  }

  .hot-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 40rpx;
    background-color: #ffffff;

    .title {
      width: 100%;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      background-color: #ffffff;

      text {
        font-size: 35rpx;
        color: #f3514f;
      }
    }
  }
}